{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block title %}Change Password{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-key me-2"></i>
                        Change Password
                    </h4>
                </div>
                <div class="card-body">
                    <form method="post" class="needs-validation" novalidate>
                        {% csrf_token %}
                        
                        {% if form.errors %}
                            <div class="alert alert-danger">
                                <strong>Error:</strong> Please correct the errors below.
                                {% for field, errors in form.errors.items %}
                                    {% for error in errors %}
                                        <div>{{ error }}</div>
                                    {% endfor %}
                                {% endfor %}
                            </div>
                        {% endif %}
                        
                        <div class="mb-3">
                            {{ form.old_password|as_crispy_field }}
                        </div>
                        
                        <div class="mb-3">
                            {{ form.new_password1|as_crispy_field }}
                            <div class="form-text">
                                <ul class="list-unstyled">
                                    <li><small id="length" class="text-muted">• At least 8 characters</small></li>
                                    <li><small id="common" class="text-muted">• Not a commonly used password</small></li>
                                    <li><small id="numeric" class="text-muted">• Not entirely numeric</small></li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            {{ form.new_password2|as_crispy_field }}
                        </div>
                        
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'profile' %}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left me-1"></i> Back to Profile
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i> Change Password
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Password validation feedback
        const newPassword1 = document.getElementById('{{ form.new_password1.id_for_label }}');
        const newPassword2 = document.getElementById('{{ form.new_password2.id_for_label }}');
        
        function validatePassword() {
            // Check if passwords match
            if (newPassword1.value !== newPassword2.value) {
                newPassword2.setCustomValidity("Passwords don't match");
            } else {
                newPassword2.setCustomValidity('');
            }
            
            // Update password requirements feedback
            const requirements = {
                length: newPassword1.value.length >= 8,
                numeric: !/^\d+$/.test(newPassword1.value),
                common: newPassword1.value.length > 0 && !['password', '12345678', 'qwerty123'].includes(newPassword1.value.toLowerCase())
            };
            
            // Update requirement indicators
            document.getElementById('length').className = requirements.length ? 'text-success' : 'text-muted';
            document.getElementById('numeric').className = requirements.numeric ? 'text-success' : 'text-muted';
            document.getElementById('common').className = requirements.common ? 'text-success' : 'text-muted';
        }
        
        newPassword1.addEventListener('input', validatePassword);
        newPassword2.addEventListener('input', validatePassword);
        
        // Initial validation
        validatePassword();
    });
</script>
{% endblock %}